<template>
  <div class="table-container" @mouseenter="isCopied = true" @mouseleave="isCopied = false">
    <div class="copy-div" v-show="isCopied">
      <el-button v-if="writeFlag" size="small" type="primary" plain @click="upsert">修 改</el-button>
      <el-button size="small" type="success" plain @click="copyData">复 制</el-button>
    </div>
    <div class="table-in">
      <el-table :data="tableData" border :row-class-name="getRowClassName">
        <el-table-column type="index" label="序号" :width="tbCols.index"/>
        <el-table-column prop="fieldName" label="字段名称" :width="tbCols.fieldName"/>
        <el-table-column label="字段类型" :width="tbCols.fieldType" :show-overflow-tooltip="true">
          <template #default="scope">
            {{ getFieldTypeName(scope.row) }}
          </template>
        </el-table-column>
        <el-table-column prop="fieldMust" label="是否必填" :width="tbCols.fieldMust"/>
        <el-table-column prop="fieldDescOut" label="字段描述" :width="tbCols.fieldDesc"/>
      </el-table>
    </div>
  </div>
</template>

<script>
import CommonUtils from "../../utils/CommonUtils";

export default {
  // 字段说明显示
  name: "FieldTableRead",
  props: {
    // 字段数据
    tableData: {
      type: Array,
      default: () => []
    },
    writeFlag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tbCols: {
        index: 55,
        fieldName: 155,
        fieldType: 90,
        fieldMust: 90,
        fieldDesc: 410
      },
      isCopied: false,
      fieldTypesMap: {}
    }
  },
  methods: {
    copyData() {
      let cpStr = '字段名称\t字段类型\t是否必填\t字段描述\t\n'
      for (const item of this.tableData) {
        cpStr += item.fieldName + '\t' + this.getFieldTypeName(item) + '\t' + item.fieldMust + '\t' + item.fieldDescOut + '\t\n'
      }
      CommonUtils.copyTextIn(cpStr)
    },
    setFieldTypesMap() {
      this.fieldTypesMap = this.$store.state.allEnum.fieldTypeMap
    },
    getFieldTypeName(field) {
      if (this.fieldTypesMap === {}) {
        this.setFieldTypesMap()
      }
      if (this.fieldTypesMap) {
        return this.fieldTypesMap[field.fieldTypeId.toString()]
      } else {
        return field.fieldTypeId.toString()
      }
    },
    upsert() {
      this.$emit('custom-event', true)
    },
    getRowClassName(row, index) {
      if (row.row.fieldMust === "是") {
        return "yes"
      }
      return ""
    }
  },
  mounted() {
    this.setFieldTypesMap()
  }
}
</script>

<style scoped>
.table-container {
  position: relative;
}

.copy-div {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

.table-in {
  z-index: 1;
}

.yes {
  background-color: red !important;
  font-size: 20px;
}
</style>